<script lang="ts" setup>
import SysColumnInfoDetail from "./SysColumnInfoDetail.vue";
import SysColumnInfoUpdate from "./SysColumnInfoUpdate.vue";
import SysColumnInfoSave from "./SysColumnInfoSave.vue";
import {SysColumnInfo} from "./SysColumnInfo";
import {DehazeFilled} from "@vicons/material";
import {stampToDatetimeText, util} from "sys\column\info../ts/util";
import post from "sys\column\info../axios";
import {IColumn, IPagination} from "sys\column\info../ts/type";
import {h, reactive} from "vue";
import {DataTableSortState, NButton, NSpace} from "naive-ui";


let search = reactive({
  hideColumn: ['id'],
  disabled: false,
  inline: false,
  labelWidth: 'auto',
  labelAlign: 'right',
  labelPlacement: 'top',
  model: {
    keyword: null,
    /*###########auto#start###########*/
    columnCode: null,
    columnComment: null,
    columnDict: null,
    columnLabel: null,
    columnLength: null,
    columnName: null,
    columnNullable: null,
    columnPrecision: null,
    columnRelate: null,
    columnScale: null,
    columnSequence: null,
    columnType: null,
    createBy: null,
    createTime: null,
    id: null,
    tableCode: null,
    updateBy: null,
    updateTime: null,
    /*###########auto##end############*/
    /* append $pageModalFormModelAppender$ */
  },
  showLabel: true,
  size: 'medium',
  items: {
    keyword: {
      label: '关键字',
      path: 'keyword',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('keyword的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        disabled: false,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入关键字',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]keyword的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]keyword的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]keyword的value变为：', value)
        }
      }
    },
    /*###########auto#start###########*/
    columnCode: {
      label: 'column编号',
      path: 'columnCode',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入column编号',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnCode的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnCode的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnCode的value变为：', value)
        }
      }
    },
    columnComment: {
      label: 'column注释',
      path: 'columnComment',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入column注释',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnComment的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnComment的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnComment的value变为：', value)
        }
      }
    },
    columnDict: {
      label: '关联取值范围字典',
      path: 'columnDict',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入关联取值范围字典',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnDict的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnDict的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnDict的value变为：', value)
        }
      }
    },
    columnLabel: {
      label: '对应label字段',
      path: 'columnLabel',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入对应label字段',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnLabel的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnLabel的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnLabel的value变为：', value)
        }
      }
    },
    columnLength: {
      label: '字段长度',
      path: 'columnLength',
      span: 4,
      input: {
        clearable: true,
        defaultValue: null,
        loading: null,
        max: null,
        min: null,
        placeholder: '请输入字段长度',
        precision: 0,
        readonly: false,
        showButton: false,
        onBlur: () => {

        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onUpdateValue: (value: number | null) => {
          console.log('[onUpdateValue]columnLength的value变为：', value)
        }
      }
    },
    columnName: {
      label: 'column名称',
      path: 'columnName',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入column名称',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnName的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnName的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnName的value变为：', value)
        }
      }
    },
    columnNullable: {
      label: '是否可Null',
      path: 'columnNullable',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入是否可Null',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnNullable的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnNullable的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnNullable的value变为：', value)
        }
      }
    },
    columnPrecision: {
      label: '数字位数',
      path: 'columnPrecision',
      span: 4,
      input: {
        clearable: true,
        defaultValue: null,
        loading: null,
        max: null,
        min: null,
        placeholder: '请输入数字位数',
        precision: 0,
        readonly: false,
        showButton: false,
        onBlur: () => {

        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onUpdateValue: (value: number | null) => {
          console.log('[onUpdateValue]columnPrecision的value变为：', value)
        }
      }
    },
    columnRelate: {
      label: '对应依赖字段',
      path: 'columnRelate',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入对应依赖字段',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnRelate的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnRelate的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnRelate的value变为：', value)
        }
      }
    },
    columnScale: {
      label: '小数精度',
      path: 'columnScale',
      span: 4,
      input: {
        clearable: true,
        defaultValue: null,
        loading: null,
        max: null,
        min: null,
        placeholder: '请输入小数精度',
        precision: 0,
        readonly: false,
        showButton: false,
        onBlur: () => {

        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onUpdateValue: (value: number | null) => {
          console.log('[onUpdateValue]columnScale的value变为：', value)
        }
      }
    },
    columnSequence: {
      label: '序列编码',
      path: 'columnSequence',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入序列编码',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnSequence的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnSequence的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnSequence的value变为：', value)
        }
      }
    },
    columnType: {
      label: 'column类型',
      path: 'columnType',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入column类型',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnType的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnType的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnType的value变为：', value)
        }
      }
    },
    createBy: {
      label: '创建人',
      path: 'createBy',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入创建人',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]createBy的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]createBy的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]createBy的value变为：', value)
        }
      }
    },
    createTime: {
      label: '创建时间',
      path: 'createTime',
      span: 8,
      input: {
        defaultValue: null,
        readonly: false,
        type: 'datetimerange',
        onUpdateFormattedValue: (value: string | null) => {
          console.log('[onUpdateFormattedValue]createTime的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]createTime的value变为：', value)
        }
      }
    },
    tableCode: {
      label: 'table编号',
      path: 'tableCode',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入table编号',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]tableCode的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]tableCode的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]tableCode的value变为：', value)
        }
      }
    },
    updateBy: {
      label: '修改人',
      path: 'updateBy',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入修改人',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]updateBy的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]updateBy的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]updateBy的value变为：', value)
        }
      }
    },
    updateTime: {
      label: '修改时间',
      path: 'updateTime',
      span: 8,
      input: {
        defaultValue: null,
        readonly: false,
        type: 'datetimerange',
        onUpdateFormattedValue: (value: string | null) => {
          console.log('[onUpdateFormattedValue]updateTime的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]updateTime的value变为：', value)
        }
      }
    },
    /*###########auto##end############*/
    /* append $pageModalFormItemsAppender$ */
  },
  reset: () => {
    search.model = {
      keyword: null,
      /*###########auto#start###########*/
      columnCode: null,
      columnComment: null,
      columnDict: null,
      columnLabel: null,
      columnLength: null,
      columnName: null,
      columnNullable: null,
      columnPrecision: null,
      columnRelate: null,
      columnScale: null,
      columnSequence: null,
      columnType: null,
      createBy: null,
      createTime: null,
      id: null,
      tableCode: null,
      updateBy: null,
      updateTime: null,
      /*###########auto##end############*/
      /* append $pageModalFormModelAppender$ */
    }
  },
})

let page = reactive<{
  hideColumn: Array<string>
  checkedRowKeys: Array<number | string>,
  columns: Array<IColumn>,
  data: Array<any>
  loading: boolean,
  pagination: IPagination,
  loadData: Function,
  changeSort: Function,
  options: any
}>({
  hideColumn: ['id', 'createBy', 'updateBy', 'createTime', 'updateTime'],
  checkedRowKeys: [],
  columns: [
    {
      title: "序号", key: "index", render: (row: SysColumnInfo, index: number) => {
        row.keyword = index + ''
        return index + 1
      }
    },
    {title: "ID", key: "id", sorter: true, defaultSortOrder: "descend"},
    /*###########auto#start###########*/
    {title: "column编号", key: "columnCode"},
    {title: "column注释", key: "columnComment"},
    {title: "关联取值范围字典", key: "columnDict"},
    {title: "对应label字段", key: "columnLabel"},
    {title: "字段长度", key: "columnLength"},
    {title: "column名称", key: "columnName"},
    {title: "是否可Null", key: "columnNullable"},
    {title: "数字位数", key: "columnPrecision"},
    {title: "对应依赖字段", key: "columnRelate"},
    {title: "小数精度", key: "columnScale"},
    {title: "序列编码", key: "columnSequence"},
    {title: "column类型", key: "columnType"},
    {title: "创建人", key: "createBy"},
    {title: "创建时间", key: "createTime"},
    {title: "table编号", key: "tableCode"},
    {title: "修改人", key: "updateBy"},
    {title: "修改时间", key: "updateTime"},
    /*###########auto##end############*/
    /* append $pageFieldAppender$ */
    /* append $pageRelateAppender$ */
    /* append $pageDictAppender$ */
    {
      title: "操作", key: "action", render: (row: SysColumnInfo) => {
        return h(
            NSpace,
            {},
            (): any => {
              return [
                h(
                    NButton,
                    {
                      type: "info",
                      onClick: () => {
                        modal.update = true
                        modal.id = row.id
                      }
                    },
                    () => {
                      return "编辑"
                    }
                ),
                h(
                    NButton,
                    {
                      onClick: () => {
                        modal.detail = true
                        modal.id = row.id
                      }
                    },
                    () => {
                      return "详情"
                    }
                ),
                h(
                    NButton,
                    {
                      type: "warning",
                      onClick: () => {
                        util.confirm(
                            "确定删除吗？",
                            () => {
                              post("/cloud-code/sysColumnInfo/auto/delete", {id: row.id}).then(() => {
                                page.loadData()
                              })
                            }
                        )
                      }
                    },
                    () => {
                      return "删除"
                    }
                )
              ]
            }
        )
      }
    }
  ],
  data: [],
  loading: false,
  pagination: {
    itemCount: 0,
    showSizePicker: true,
    showQuickJumper: true,
    pageSizes: [10, 20, 50, 100],
    onUpdatePage: (pageNum: number) => {
      page.pagination.page = pageNum
      page.loadData()
    },
    onUpdatePageSize: (pageSize: number) => {
      page.pagination.pageSize = pageSize
      page.loadData()
    }
  },
  loadData: () => {
    page.loading = true
    post("/cloud-code/sysColumnInfo/auto/page", Object.assign({}, page.pagination, search.model)).then((res: any) => {
      page.data = res.list
      page.pagination.itemCount = res.total
    }).finally(() => {
      page.loading = false
    })
  },
  changeSort: (options: DataTableSortState) => {
    if (options.order === false) options.order = "descend"
    page.pagination.desc = options.order === "descend"
    page.loadData()
  },
  options: {}
})

/* append $commonOptionsAppender$ */

let modal = reactive<{
  save: boolean,
  update: boolean,
  detail: boolean,
  id: number | null
}>({
  save: false,
  update: false,
  detail: false,
  id: null
})

page.loadData()
</script>

<template>
  <n-card title="字段信息">
    <n-form
        :model="search.model"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi v-if="!search.hideColumn.includes('keyword')" v-bind="search.items.keyword">
          <n-input v-model:value="search.model.keyword" v-bind="search.items.keyword.input"/>
        </n-form-item-gi>
        /*###########auto#start###########*/
        <n-form-item-gi v-if="!search.hideColumn.includes('columnCode')" v-bind="search.items.columnCode">
          <n-input v-model:value="search.model.columnCode" v-bind="search.items.columnCode.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnComment')" v-bind="search.items.columnComment">
          <n-input v-model:value="search.model.columnComment" v-bind="search.items.columnComment.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnDict')" v-bind="search.items.columnDict">
          <n-input v-model:value="search.model.columnDict" v-bind="search.items.columnDict.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnLabel')" v-bind="search.items.columnLabel">
          <n-input v-model:value="search.model.columnLabel" v-bind="search.items.columnLabel.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnLength')" v-bind="search.items.columnLength">
          <n-input-number v-model:value="search.model.columnLength" v-bind="search.items.columnLength.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnName')" v-bind="search.items.columnName">
          <n-input v-model:value="search.model.columnName" v-bind="search.items.columnName.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnNullable')" v-bind="search.items.columnNullable">
          <n-input v-model:value="search.model.columnNullable" v-bind="search.items.columnNullable.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnPrecision')" v-bind="search.items.columnPrecision">
          <n-input-number v-model:value="search.model.columnPrecision" v-bind="search.items.columnPrecision.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnRelate')" v-bind="search.items.columnRelate">
          <n-input v-model:value="search.model.columnRelate" v-bind="search.items.columnRelate.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnScale')" v-bind="search.items.columnScale">
          <n-input-number v-model:value="search.model.columnScale" v-bind="search.items.columnScale.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnSequence')" v-bind="search.items.columnSequence">
          <n-input v-model:value="search.model.columnSequence" v-bind="search.items.columnSequence.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('columnType')" v-bind="search.items.columnType">
          <n-input v-model:value="search.model.columnType" v-bind="search.items.columnType.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('createBy')" v-bind="search.items.createBy">
          <n-input v-model:value="search.model.createBy" v-bind="search.items.createBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('createTime')" v-bind="search.items.createTime">
          <n-date-picker v-model:value="search.model.createTime" v-bind="search.items.createTime.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('tableCode')" v-bind="search.items.tableCode">
          <n-input v-model:value="search.model.tableCode" v-bind="search.items.tableCode.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('updateBy')" v-bind="search.items.updateBy">
          <n-input v-model:value="search.model.updateBy" v-bind="search.items.updateBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('updateTime')" v-bind="search.items.updateTime">
          <n-date-picker v-model:value="search.model.updateTime" v-bind="search.items.updateTime.input"/>
        </n-form-item-gi>
        /*###########auto##end############*/
        /* append $pageTemplateFormAppender$ */
      </n-grid>

      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12">
          <n-space>
            <n-button
                v-limitClick="3000"
                type="primary"
                @click="page.loadData">
              搜索
            </n-button>
            <n-button
                v-limitClick="3000"
                type="info"
                @click="search.reset">
              重置
            </n-button>
          </n-space>
        </n-form-item-gi>
        <n-form-item-gi :span="12">
          <n-space justify="end">
            <n-button
                type="success"
                @click="modal.save = true">
              新增
            </n-button>
            <n-popselect v-model:value="page.hideColumn" :options="page.columns.map(c => {return {label: c.key, value: c.key}})" multiple
                         scrollable>
              <n-button>
                <n-icon>
                  <DehazeFilled/>
                </n-icon>
              </n-button>
            </n-popselect>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-data-table
        :bordered="false"
        :checked-row-keys="page.checkedRowKeys"
        :columns="page.columns.filter(c => !page.hideColumn.includes(c.key))"
        :data="page.data"
        :loading="page.loading"
        :pagination="page.pagination"
        :row-key="(row: any) => row.id"
        remote
        @update:sorter="page.changeSort"
    />
  </n-card>
  <SysColumnInfoSave :options="page.options" :show="modal.save"
                     @close="modal.save = false" @refresh="page.loadData"/>
  <SysColumnInfoUpdate :id="modal.id" :options="page.options" :show="modal.update"
                       @close="modal.update = false" @refresh="page.loadData"/>
  <SysColumnInfoDetail :id="modal.id" :options="page.options" :show="modal.detail"
                       @close="modal.detail = false" @refresh="page.loadData"/>
</template>

<style scoped>

</style>